<template>
  <view class="wrap">
    <view class="bg-color">
      <u-search placeholder="搜索人员名称" v-model="keyword" shape="square" :showAction="false" margin="20rpx"
                height="80rpx" placeholderColor="rgba(0,0,0,0.4)" style="flex: initial;"></u-search>
    </view>
    <view class="main-box">
      <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
        <view class="page-box">
          <view class="card" @click="hanleClick()">
            <view class="card-body">
              <view class="label">
                <text class="text">姓名：</text>
                <text>刘金鹏</text>
              </view>
              <view class="label">
                <text class="text">状态：</text>
                <text>在职</text>
              </view>
              <view class="label">
                <text class="text">手机号：</text>
                <text>在职</text>
              </view>
              <view class="label">
                <text class="text">状态：</text>
                <text>在职</text>
              </view>

              <view class="flex justify-space-between label">
                <view>
                  <text class="text">加入时间：</text>
                  <text>2023-09-25</text>
                </view>

                <view
                    style="width: 40rpx;height: 40rpx;border: 2rpx solid rgba(0,0,0,0.2);border-radius: 40rpx;line-height: 40rpx;display: flex;align-items: center;">
                  <u-icon name="arrow-rightward" color="#999999" style="margin-left: 5rpx;"></u-icon>
                </view>
              </view>
            </view>
          </view>

        </view>
      </scroll-view>
    </view>
    <view @click="hanleAdd" class="Add">添加<br/>成员</view>
  </view>
</template>


<script>

import {goNav} from "../../../../utils/common";

export default {
  components: {},
  data() {
    return {
      current: 0,

      keyword: '',
      swiperCurrent: 0,
      list: [{
        name: '全部'
      },
        {
          name: '已签署'
        },
        {
          name: '待签署'
        },
        {
          name: '签署中',
        },
        {
          name: '已过期',

        }
      ],
      loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
    };
  },
  methods: {
    // tab栏切换
    change(index) {
      console.log(index)
      this.swiperCurrent = index;
      this.getOrderList(index);
      this.current = index;
    },
    // 页面数据
    getOrderList(idx) {
      // for(let i = 0; i < 5; i++) {
      // 	let index = this.$u.random(0, this.dataList.length - 1);
      // 	let data = JSON.parse(JSON.stringify(this.dataList[index]));
      // 	data.id = this.$u.guid();
      // 	this.orderList[idx].push(data);
      // }
      // this.loadStatus.splice(this.current,1,"loadmore")
    },
    transition({
                 detail: {
                   dx
                 }
               }) {
      //this.$refs.tabs.setDx(dx);
    },
    animationfinish({
                      detail: {
                        current
                      }
                    }) {

      this.swiperCurrent = current;
      this.current = current;
    },
    reachBottom() {
      // // 此tab为空数据
      // if(this.current != 2) {
      // 	this.loadStatus.splice(this.current,1,"loading")
      // 	setTimeout(() => {
      // 		this.getOrderList(this.current);
      // 	}, 1200);
      // }
    },
    hanleClick() {
      goNav('/pages/my/member/detail');
    },
    hanleAdd() {
      goNav('/pages/my/member/add-member');
    }
  },

  onReady() {

  },
};
</script>
<style>
page {
  height: 100%;
}
</style>
<style scoped lang="scss">
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;

}

.page-box {
  .card {
    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 26rpx;
    width: 710rpx;
    background-color: #ffffff;
    margin: 20rpx auto;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 20rpx;
    font-size: 28rpx;

    .label {
      line-height: 60rpx;
    }

    .text {
      display: inline-block;
      width: 150rpx;
    }
  }
}

</style>